<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { useRoute } from 'vue-router';
  import { getUserInfo, thirdLogin } from '@/services/api/user';
  import { ThirdLoginParams } from '@/services/api/type';
  import useSetting from '@/store/modules/setting';
  import Loading from '@/components/Loading/index.vue';
  import SvgIcon from '@/components/SvgIcon/index.vue';
  import Register from './Register.vue';
  import Login from './Login.vue';
  import QrLogin from './QrLogin.vue';
  import Tips from './Tips.vue';
  import { useRouter } from 'vue-router';
  import storeUtil from '@/utils/storeUtil';
  import tokenUtil from '@/utils/tokenUtil';
  import useUserStore from '@/store/modules/useUserStore';

  // 获取设置
  const setting = useSetting();
  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  // 获取平台信息
  const platform = route.query.platform as string;
  const platformInfo = computed(() => setting.logins.find(u => u.type === platform));
  const uid = ref<string>('');

  // 获取 token
  const getToken = () => {
    const params: ThirdLoginParams = {
      type: platform,
      code: route.query.code as string,
      state: route.query.state as string,
    };
    thirdLogin(params)
      .then(({ data }) => {
        if (data != null) {
          if (data.bind) {
            tokenUtil.setToken(
              data.tokenName as string,
              data.token as string,
              data.tokenTimeout as number,
            );
            getUserInfo().then(res => {
              const userInfoData = res.data;
              userStore.updateUserInfo(userInfoData);
              storeUtil.setInfo('userInfo', userInfoData, data.tokenTimeout as number);
              router.push('/');
            });
          } else {
            uid.value = data.uid;
            bind.value = data.bind;
          }
        } else {
          router.push('/');
          bind.value = false;
        }
      })
      .catch(() => {
        router.push('/');
      });
  };

  // 默认选中的 Tab
  const activeTab = ref<string>('qr');
  const bind = ref<boolean>(true);
  const tabs = [
    { name: 'password', label: '密码登录' },
    { name: 'smsLogin', label: '短信登录' },
    { name: 'qr', label: '扫码登录' },
  ];

  // 执行 token 获取
  getToken();
</script>

<template>
  <div class="login-container" v-if="!bind">
    <div class="container">
      <!-- 左侧：第三方登录图标和你的图标 -->
      <div class="left">
        <div class="logo">
          <img :src="platformInfo?.logo" alt="social-logo" width="120px" height="120px" />
          <span>{{ platformInfo?.typeName }}</span>
        </div>
        <div class="arrows">
          <SvgIcon name="arrow2" width="120px" height="120px" />
        </div>
        <div class="logo">
          <img :src="setting.logo" alt="shijin-video" width="120px" height="120px" />
          <span>{{ setting.title }}</span>
        </div>
      </div>

      <div class="line"></div>

      <!-- 右侧：登录框 -->
      <div class="right">
        <div class="right-container">
          <!-- Tab 按钮 -->
          <div class="tabs-container">
            <div class="tabs" v-for="(tab, index) in tabs" :key="tab.name">
              <div
                class="tab-item"
                :class="{ 'active-tab': activeTab === tab.name }"
                @click="activeTab = tab.name"
              >
                <span>{{ tab.label }}</span>
              </div>
              <!-- 只有不是最后一个 Tab 时才显示 -->
              <div v-if="index !== tabs.length - 1" class="line"></div>
            </div>
          </div>

          <!-- Tab 内容 -->
          <div class="tab-content">
            <div class="tab-content-item" v-show="activeTab === 'qr'">
              <QrLogin :uid="uid" />
            </div>
            <div class="tab-content-item" v-show="activeTab === 'password'">
              <Login v-model:active-name="activeTab" v-model:uid="uid" />
            </div>
            <div class="tab-content-item" v-show="activeTab === 'smsLogin'">
              <Register :uid="uid" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 提示信息 -->
    <Tips />
  </div>

  <Loading tip="登录中。。。" v-if="bind" />
</template>

<style scoped lang="scss">
  .container {
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .line {
    margin: 0 20px;
    background-color: aliceblue;
    width: 2px;
    height: 100%;
  }

  .arrows {
    vertical-align: baseline;
    margin-top: -30px;

    .arrow {
      width: 100px;
      height: 10px;
    }
  }

  .left {
    min-width: 400px;
    flex: 1;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .logo {
      display: flex;
      flex-direction: column;
      align-content: center;
      align-items: center;
      justify-content: center;

      span {
        padding: 10px 0;
        font-size: smaller;
      }
    }

    .third_arrow {
      width: 100px;
      height: 20px;
    }

    img {
      padding: 0 20px;
      width: 100px;
      height: 100px;
    }

    svg {
      width: 70px;
      height: 70px;
    }
  }

  .right {
    flex: 1;
    height: 100%;
    width: 100%;
    padding: 10px 30px;

    .right-container {
      width: 380px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
  }

  .login-container {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 100px;
  }

  .tabs-container {
    display: flex;
    align-items: center;
  }

  .tabs {
    display: flex;
    height: 30px;
    align-items: center;

    .tab-item {
      cursor: pointer;
      width: 64px;
      color: #c5c4c4;
    }

    .active-tab {
      color: #00d8d8;
    }
  }

  .tab-content {
    height: 350px;
    box-sizing: border-box;
    display: flex;
    width: 70%;
    padding-top: 20px;

    .tab-content-item {
      width: 100%;
    }
  }
</style>
